<div class="row" id="myModal1">
	<div class="col-xs-12">
		<div class="box">
			<!-- /.box-header -->
			<div class="box-body">
				<div style="padding-bottom: 20px;">
					<h5 id="mode_h5"></h5>
					<button id="back"  class="btn btn-primary" data-dismiss="modal" style="float:right;">返回</button>	
					<a id="selectNode" class="btn btn-primary " data-toggle="modal" data-target="#myModal2">选择Master节点</a> 
					<a id="nextStep" class="btn btn-primary " data-toggle="modal" data-target="#">下一步</a> 
				</div>
				<div style="padding-bottom: 5px;">
					<span>节点IP:</span>
					<span id="multiIp"></span>
				</div>
				<div style="padding-bottom: 10px;">
					<span>主机名:</span>
					<span id="multiName"></span>
				</div>
				<!-- <table id="multiMaster" class="table table-bordered table-hover"
					style="font-size: 12px;">
					<thead>
						<tr>
							<th>角色</th>
							<th>参数名</th>
							<th>参数值</th>
							<th>描述</th>
						</tr>
					</thead>
				</table> -->
				
				<div style="padding: 10px 0px;">
					<span>Kubernetes nodes&nbsp;&nbsp;&nbsp;&nbsp;</span>
					<a id="addNode" class="btn btn-primary " data-toggle="modal" data-target="#myModal2">添加节点</a> 
				</div>
				
				<table id="multiNodes" class="table table-bordered table-hover"
					style="font-size: 12px;">
					<thead>
						<tr>
							<th>节点</th>
							<th>设置</th>
						</tr>
					</thead>
				</table>
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
	<!-- /.col -->
</div>

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">选择节点</h4>
			</div>
			<div class="modal-body">
				<!-- Horizontal Form -->
		          <div class="box box-info" style="margin-bottom:0px;">
		            <!-- form start -->
		            <form class="form-horizontal">
		              <table id="example2" class="table table-bordered table-hover" style="font-size: 12px;">
						<thead>
						<tr>
							<th></th>
							<th>host_name</th>
							<th>ip</th>
							<th>root_passwd</th>  
							<th>last_update</th>
							<th>cores</th>
							<th>lacation</th>
						</tr>
						</thead>
						</table>
		              <!-- /.box-body -->
		            </form>
		          </div>
		          <!-- /.box -->
			</div>
			<div class="modal-footer">
				<button  type="button" class="btn btn-default" data-dismiss="modal">关<span style="padding-left: 12px" />闭
				</button>
				<button type="button" class="btn btn-primary" data-dismiss="modal"  id="selectSaveBtn">保<span style="padding-left: 12px" />存
				</button>
				<button type="button" class="btn btn-primary" data-dismiss="modal"  id="addSaveBtn">保<span style="padding-left: 12px" />存
				</button>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="myModal4" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">设置参数</h4>
			</div>
			<div class="modal-body">
				<!-- Horizontal Form -->
		          <div class="box box-info" style="margin-bottom:0px;">
		            <!-- form start -->
		            <form class="form-horizontal">
		              <div class="box-body" id="setting">
		                
		              </div>
		            </form>
		          </div>
		          <!-- /.box -->
			</div>
			<div class="modal-footer">
				<button  type="button" class="btn btn-default" data-dismiss="modal">关<span style="padding-left: 12px" />闭
				</button>
				<button type="button" class="btn btn-primary" data-dismiss="modal" id="setSaveBtn">保<span style="padding-left: 12px" />存
				</button>
			</div>
		</div>
	</div>
</div>
<script>
$("#back").click(function(){
	$(".content").load("cluster_main.html");
});
var root_passwd="";
var status="";
$("#selectNode").click(function(){
	$("#myModalLabel").html("选择节点");
	$("#addSaveBtn").hide();
	$("#selectSaveBtn").show();
	selectOrAddNode("select");
});
$("#addNode").click(function(){
	$("#myModalLabel").html("添加节点");
	$("#selectSaveBtn").hide();
	$("#addSaveBtn").show();
	selectOrAddNode("add");
});



function selectOrAddNode(_type){
	$('#example2').DataTable({
	    "ajax":"/host/1",
	    "columns": [
	    			{ "data": "id", render: function ( data, type, row ) {
	            		// Combine the first and last names into a single table field
	            			return _type=="select"?"<input type='radio' value='"+data+"' class='chkbox' name='child' checked='checked'/>":"<input type='checkbox' value='"+data+"' class='chkbox' name='child'/>";
	        		} },
	    			{ "data": "hostName" },
	    			{ "data": "ip" },
	    			{ "data": "rootPasswd" },
	    			{ "data": "lastUpdated" },
	    			{ "data": "cores" },
	    			{ "data": "location" },
	    			
	       		],
	   		"buttons": [
	   		          {
	   		              text: 'Reload',
	   		              action: function ( e, dt, node, config ) {
	   		                  dt.ajax.reload();
	   		              }
	   		          }
	   		      ],
	   		"bDestroy": true
	});
}

//模版默认的值显示
$.ajax({
    url:"/deploycluster/getcurtemplate",
    type: "GET",
    dataType:"json",
    success: function(data){
    	var li="";
    	$("#mode_h5").html("您选择了"+data.name+"模式，至少需要"+data.minNodes+"节点，建议"+data.maxNodes+"个节点");
    	$.each(data.nodes,function(i,item){
    		if(i==0){
    			$("#multiIp").html(item.ip);
    	    	$("#multiName").html(item.hostName);
    		}else{
    			li +="<tr><td>"+item.ip+"</td><td><Button class='del' value='"+item.hostId+"'>删除</Button></td></tr>";
    		}
    	});
    	$("#multiNodes").html("<tr><td>节点</td><td>设置</td></tr>"+li);
    	deleteNode();
    }
});
//选择节点按钮事件
$("#selectSaveBtn").click(function(){
		
    	var td = $(".chkbox:checked").first().parent("td");
		td = $(td).next("td");
		var nodename = jQuery.trim($(td).text());
		td = $(td).next("td");
		var nodeip = jQuery.trim($(td).text());
		td = $(td).next("td");
		var root_passwd = jQuery.trim($(td).text());
		var nodeid=$(".chkbox:checked").val();
		var _addnode=nodeip+","+nodeid+","+nodename+","+root_passwd;
		
		$("#multiIp").html(nodeip);
    	$("#multiName").html(nodename);
    	
    	//Master节点数据
    	$.ajax({
	        url:"/deploycluster/getnodemodal/multiNode",
	        data:{
	        	'addnode':_addnode
	        },
	        type: "GET",
	        dataType:"json",
	        success: function(data){
				
	        }
	    });
});

//添加节点按钮事件
$("#addSaveBtn").click(function(){
	var de="";
	$(":checkbox:checked").closest("#example2 tr").find(":checkbox").each(function(i, eleDom) {
		// 遍历每个被选中的复选框所在行的文本框的值,如果当前页面包含这个id则不添加
		de += eleDom.value + ",";
	});
	
	//添加数据到后台
	$.ajax({
        url:"/deploycluster/addk8snodes/"+de,
        type: "GET",
        dataType:"json",
        success: function(data){	
        }  
    });	
	//nodes节点显示
	setTimeout(addData, 500);
});



function addData(){
	$.ajax({
	    url:"/deploycluster/nodeslist?type=node",
	    type: "GET",
	    dataType:"json",
	    success: function(data){
	    	var li="";
	    	$.each(data,function(i,item){
	    		li +="<tr><td>"+item.ip+"</td><td><Button class='del' value='"+item.hostId+"'>删除</Button></td></tr>";
	    	});
	    	$("#multiNodes").html("<tr><td>节点</td><td>设置</td></tr>"+li);
	    	//修改参数
        	$( '#multiNodes' ).find( 'tr .set' ).click(function() {
        		$("#setting").html("");
				var dialogValue=$( this ).attr('value');
				var dialogip=$( this ).attr('c');
				var dialogpasswd=$( this ).attr('passwd');
				var modifyId=$( this ).attr('count');
				var hostName=$( this ).attr('host');
				var arrname=dialogValue.split(";");
				var i;
				var li="";
				for(i=0;i<arrname.length-1;i++){
					var arrValue=arrname[i].split("=");
					li +=[
					      '<div class="form-group">',
					      '<label class="col-sm-2 control-label" >'+arrValue[0]+'</label>',
					      '<div class="col-sm-10">',
					      '<input type="text" class="form-control" value="'+arrValue[1]+'" id="'+arrValue[0]+'">',
					      '</div>',
					      '</div>'
					      ].join('');
				}
				$("#setting").html('<div class="form-group"><label class="col-sm-2 control-label">'+dialogip+dialogpasswd+'</label></div>'+li);
				
				$("#setSaveBtn").click(function(){
					$(this).unbind('click');
					$("#"+modifyId).html("ansible_ssh_user="+$("#ansible_ssh_user").val()+";ansible_ssh_pass="+$("#ansible_ssh_pass").val()+";");
				});
			});

        	deleteNode();
	    	
	    }
	});
}

function deleteNode(){
	//删除行
	$( '#multiNodes' ).find( 'tr .del' ).click(function() {
		var deleteId=$(this).val();
		$.ajax({
	        url:"/deploycluster/deletenode/"+deleteId,
	        type: "GET",
	        dataType:"json",
	        success: function(data){
	  
	        }  
	    });	
		setTimeout(addData, 500);
	});
}

$("#nextStep").click(function(){
	$(".content").load("modeNext.html?data=multiNode");
});
</script>